<template>
  <div>
    <div class="chat-edit" ref="chatEdit" contenteditable="true" @keypress="onKeypress" @keyup="onKeyup">
      edit😀
      fdas
    </div>
    <div class="chat-edit-tool">
      
      <span>(Ctrl+Enter) 进行发送</span>
      <el-button
        size="mini"
        icon="el-icon-s-promotion"
        style="float:right;margin-right:10px;"
        @click="onSend"
        >发送</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  model:{
    methods:['send',"setText"]
  },
  data(){
    return {}
  },
  methods:{
    onSend(){
      const text = this.$refs.chatEdit.innerText
      if (text!="" || this.$refs.chatEdit.innerHTML.indexOf('img')>=0){
        this.$emit('send',this.$refs.chatEdit.innerHTML)
        this.$refs.chatEdit.innerHTML = ""
      }
    },
    onKeypress(e){
      if (e.keyCode==10){
        this.onSend()
      }
    },
    onKeyup(e){
      if (e.keyCode==10){
        e.target.innerHTML = ""
      }
    },
    setText(val){
      this.$refs.chatEdit.innerHTML+=val
    }
  }
}
</script>

<style lang="less" scoped>
.chat-edit {
  padding: 5px 10px;
  height: 120px;
  max-height: 120px;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
}
.chat-edit-tool {
  text-align: right;
  font-size: 12px;
  height:28px;
  line-height: 28px;
  color:#aaa;
  span {
    margin-right:20px;
  }
}
img {
  border-style:none;
}
</style>
